<template>
  <el-card>
      <el-button @click="$router.push('/admin/add')" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
      <el-divider/>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="username" label="账号" width="180"></el-table-column>
      <el-table-column prop="rolename" label="角色" width="180"></el-table-column>
      <el-table-column prop="status" label="状态">
        <!--slot-scope:老的写法  -->
        <!-- v-slot:新写法 -->
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="$router.push('/admin/'+scope.row.uid)" type="primary" circle size="mini" icon="el-icon-edit"></el-button>
          <el-button @click="del(scope.row.uid)" type="danger" circle size="mini" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- total:数据总条数  -->
    <el-pagination @current-change="pageChange" :page-size="1" background layout="prev, pager, next" :total="total"></el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      size: 1,
      list: [],
      total:0
    };
  },
  methods: {
    async getAdminList() {
      const res = await this.$http.get("/api/userlist", {
        params: { page: this.page, size: this.size }
      });
      //   console.log(res);
      if (res.code == 200) {
        this.list = res.list;
      }
    },
    // 获取数据总条数
    async getTotal(){
        const res=await this.$http.get('/api/usercount');
        if(res.code==200){
            this.total=res.list[0].total;
        }
    },
    // 监听页码的改变
    pageChange(page){
        // 1-更新page的值
        this.page=page;
        // 2-重新请求列表数据
        this.getAdminList();
    },
    // 管理员删除
  del(uid){
       this.$myConfirm(async ()=>{
        const res=await this.$http.post('/api/userdelete',{uid});
        if(res.code!=200){
            this.$error('删除失败!');
        }else{
          // 从页面中移除被删除的数据
          // 查找要删除的元素的下标
          const index=this.list.findIndex(item=>item.uid==uid);
          // 删除数据元素
          this.list.splice(index,1);
        }
       });
    }
  },
  created() {
    this.getAdminList();
    this.getTotal();
  }
};
</script>

<style>
</style>